<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.bg{
			background:red;
		}
	</style>
</head>
<body>
	<div>我确定你就是那只匹着羊皮的狼！</div>
	<button>点我</button>
</body>
<script>
	const div = document.querySelector("div");
	document.querySelector("button").onclick = function(){
		setTimeout(()=>{
			console.log("timeout");
		})
		div.innerHTML+="!";
		div.className = "bg";
		console.log("over");
		
	}
	const serve = new MutationObserver(function(ev){
		console.log("MutationObserver",ev);
	});
	// 第一个参数是要监听的DOM元素,第二个参数是监听的配置项（对象）
	serve.observe(div,{
		childList:true,// 监听div的内容是否发生改变
		attributes:true
	})
</script>
</html>